<template>
  <div :id="id + '-map-container'" :class="['map-container', customClass]" />
</template>
<script>
import mapCreator from './mapCreator'
import { onMounted, ref } from 'vue-demi'
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    customClass: {
      type: String,
      default: ''
    },
    center: {
      type: Array,
      default: () => [],
      validator: function (val) {
        return val.length === 0 || val.length === 2
      }
    },
    // 注意：如果指定了外包范围,则根据外包范围自适应地图大小和中心点， center 和 defaultLevel 不起作用
    extent: {
      type: Array,
      default: () => [],
      validator: function (val) {
        return val.length === 0 || val.length === 4
      }
    },
    projection: {
      type: String,
      default: 'EPSG:4326'
    },
    minZoom: {
      type: Number,
      default: 6
    },
    maxZoom: {
      type: Number,
      default: 18
    },
    zoom: {
      type: Number,
      default: 7
    },
    baseMap: {
      type: Array,
      required: true,
      default: () => []
      // TODO 可根据目前的类库做一下验证
    },
    layers: {
      type: Array,
      default: () => []
    },
    controls: {
      type: Array,
      default: () => []
    }
  },
  setup (props) {
    const map = ref(null)

    const initMap = () => {
      const mapConfig = {
        mapProjection: props.projection,
        defaultMapViewLevel: props.zoom,
        maxZoom: props.maxZoom,
        minZoom: props.minZoom
      }
      if (props.center.length) mapConfig.defaultMapViewCenter = props.center
      if (props.extent.length) mapConfig.extent = props.extent

      map.value = mapCreator(props.id + '-map-container', mapConfig, props.baseMap, props.layers, props.controls)
      window.map = map.value
    }

    onMounted(() => {
      initMap()
    })

    return {
      initMap,
      map
    }
  }
}
</script>
<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>
